<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<style>
    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    .table [valign="top"] {
        vertical-align: top;
    }

    #newOrder div[id^=m] {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        margin: 2px;
        padding: 2px;
        line-height: 25px;
        float: left;
        width: 45%;
        min-height: 225px;
    }

    #newOrder div[id^=m] span {
        float: left;
    }

    .title {
        width: 60px;
        margin-left: 20px;
    }

    .box {
        border: 1px solid #EDEDED;
        border-radius: 4px;
        margin: 4px;
        padding: 6px;
        line-height: 20px;
        min-width: 360px;
        max-width: 500px;
    }

    .box .close {
        margin-top: -20px;
    }
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a title="退货订单" deny="not" class="nFocus" href="#newOrder" data-toggle="tab">
            <i class="icon-share-alt"></i>
            商品退货
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="newOrder">
        <form id="inputForm" class="form-inline" action="${ctx}/adoms/reback/returns" method="post">
            <input type="hidden" name="id" value="${order.id}"/>
            <input type="hidden" name="type" value="0"/>
            <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <td class="span2">收货部门:</td>
                    <td>
                        <select id="departmentTarget" name="departmentTarget.id">
                            <option value="${USER.department.id}">${USER.department.name}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>退货部门:</td>
                    <td><select id="department" name="department.id">
                        <option value="" id="dPlz">请选择...</option>
                        <c:forEach items="${dList }" var="d" varStatus="index">
                            <option value="${d.id }">${index.index + 1}.${d.name }</option>
                        </c:forEach>
                    </select></td>
                </tr>

                <tr>
                    <td class="span2">退货商品:</td>
                    <td><select id="marchandise" name="marchandise.id" style="width: auto;">
                        <option value="" id="plz">请选择...</option>
                        <c:forEach items="${mList }" var="m" varStatus="index">
                            <option value="${m.id }">${index.index + 1}.${m.name }</option>
                        </c:forEach>
                    </select></td>
                </tr>
                <tr>
                    <td class="span2" valign="top">商品详情:</td>
                    <td><i class="icon-eye-open"></i> <a id="idShow" style="cursor: pointer;">显示商品详情</a>

                        <div id="eyeInfo" class="hide">
                            <c:forEach items="${mList }" var="m" varStatus="index">
                                <div class="hide" id="m${m.id }">
                                    <span class="title">商品名称：</span>
                                    <span class="span3" mName="mName">${index.index + 1}.${m.name }</span>
                                    <br/>
                                    <span class="title">商品编号：</span>
                                    <span class="span3">${m.code }</span>
                                    <br/>
                                    <span class="title">单价：</span>
									<span class="span3 tBlue">
										<span mprice="mPrice">${m.price }</span>
										元
									</span>
                                    <br/>
                                    <span class="title">规格：</span>
                                    <span spcification="spcification" class="span3">${m.spcification }</span>
                                    <br/>
                                    <span class="title">每件数量：</span>
                                    <span numOfBox="numOfBox" class="span3">${m.numOfBox } ${m.packageing }</span>
                                    <br/>
                                    <span class="title">商品条码：</span>
                                    <span class="span3">${m.barCode }</span>
                                    <br/>
                                    <span class="title">品牌：</span>
                                    <span class="span3">${m.brand.name }</span>
                                    <br/>
                                    <span class="title">产地：</span>
                                    <span class="span3">${m.producePlace }</span>
                                    <br/>
                                    <span class="title">保质期：</span>
                                    <span class="span3">${m.shelflife } 月</span>
                                    <br/>
                                    <span class="title">商品描述：</span>
                                    <span class="span3">${m.description }</span>
                                    <br/>
                                </div>
                            </c:forEach>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>退货详情：</td>
                    <td>
                        <div style="width: 100%;">
                            <table style="margin: auto; width: 100%;"
                                   class="table-striped table-bordered table-condensed">
                                <tbody>
                                <tr>
                                    <th>商品名称</th>
                                    <th>单价(元)</th>
                                    <th>规格</th>
                                    <th>件数</th>
                                    <th>每件数量</th>
                                    <th>数量</th>
                                    <th>退款总价(元)</th>
                                </tr>
                                <tr>
                                    <td id="mName"></td>
                                    <td class="tBlue"><span id="mPrice" class="tRed">0.00</span>
                                    <td id="spcification"></td>
                                    <td><input id="boxNum" name="boxNum" type="text" class="span1"/> (件)</td>
                                    <td id="numOfBox"></td>
                                    <td><input class="span1" id="goodsNumber" name="items" type="text" value="0"
                                               size="30" maxlength="4"/></td>
                                    <td><input id="totalCost" readonly="readonly" class="span2" name="totalPrice"
                                               type="text" value="0.00" size="30" maxlength="8"/></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">商品二维码:
                        <br/>
                        <span class="tRed">扫描</span>
                    </td>
                    <td><input name="goodsQr" id="goodsQr" class="span6" type="text" maxlength="50"/>
                        <span id="clearBtn" class="btn btn-small btn-primary">清 空</span>
                        <span id="clearDataBtn" class="btn btn-small btn-danger pull-right">清空已扫描的数据</span>
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">退货商品清单:<br/> <span class="tRed">
							共
							<span id="outTotal">0</span>
							条
							<br/>
							已录入
							<span id="outNum">0</span>
							条
						</span></td>
                    <td>
                        <div id="qrBoxList" style="min-height: 65px; max-height: 150px; overflow-y: auto;"></div>
                    </td>
                </tr>
                <tr style="display: none;">
                    <td class="span2">退单名称:</td>
                    <td><input id="name" class="span4" name="name" type="text" value="1" size="30"
                               maxlength="80"/></td>
                </tr>
                <tr>
                    <td>联系电话:</td>
                    <td><input id="phone" name="phone" type="text" value="${order.phone}" size="30" maxlength="80"/>
                    </td>
                </tr>

                <tr>
                    <td>联系人:</td>
                    <td><span class="tBlue">${USER.name }</span> <input id="createUser" name="createUser" type="hidden"
                                                                        value="${USER.name }" size="30" maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td valign="top">退货原因:</td>
                    <td><textarea id="memo" name="memo" rows="3" class="span6">${order.memo}</textarea></td>
                </tr>
                <tr>
                    <td align="center" class="text-center" colspan="2">
                        <input id="submitBtn"
                               class="btn btn-primary"
                               disabled="disabled"
                               type="button" value="确认，并提交"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
$(document).ready(function () {
    //为inputForm注册validate函数
    $("#inputForm").validate({
        rules: {
            totalCost: {
                required: true,
                number: true
            },
            phone: "required",
            receivedTime: "required",
            name: "required",
            orderChargeUser: "required",
            orderCreateTime: "required",
            status: "required",
            "department.id": "required",
            departmentTarget: "required",
            createUser: "required",
            items: {
                required: true,
                number: true
            }
        }
    });
    //展示商品详情
    $("#idShow").toggle(function () {
        $("#eyeInfo").show("slow");
        $(this).html("隐藏商品详情");
        $(".icon-eye-open").attr("class", "icon-eye-close");
    }, function () {
        $(".icon-eye-close").attr("class", "icon-eye-open");
        $(this).html("显示商品详情");
        $("#eyeInfo").hide("slow");
    });
    //
    $("#marchandise").change(function () {
        try {
            var mid = $(this).val();
            $("div[id^=m]").hide();
            $("#m" + mid).show();
            $("#mPrice").html($("[mPrice]", $("#m" + mid)).html());
            $("#mName").html($("[mName]", $("#m" + mid)).html());
            $("#spcification").html($("[spcification]", $("#m" + mid)).html());
            $("#numOfBox").html($("[numOfBox]", $("#m" + mid)).html());
            $("#goodsNumber").keyup();
            $("#plz").remove();
        } catch (e) {
        }
    });
    $("#department").change(function () {
        $("#dPlz").remove();
    });
    //计算总价
    $("#goodsNumber").keyup(function () {
        var number = parseInt($("#goodsNumber").val());
        var numOfBox = parseInt($("#numOfBox").text());
        try {
            $("#boxNum").val((number / numOfBox).toFixed(2));
        } catch (e) {
            console.log(e);
        }
        changeNum();
    });

    $("#boxNum").keyup(function () {
        var boxNum = parseFloat($(this).val());
        var numOfBox = parseInt($("#numOfBox").text());
        var goodsNumber = boxNum * numOfBox;
        $("#goodsNumber").val(goodsNumber);
        changeNum();
    });

    var changeNum = function () {
        var number = parseInt($("#goodsNumber").val());
        var price = parseFloat($("#mPrice").html());
        var cost = number * price;
        $("#totalCost").val(cost.toFixed(2));
        $("#outTotal").html(number);
        if (cost > 0) {
            $(":submit").removeAttr("disabled");
        }
    };

    var lockField = function (isLock) {
        var css;
        if (isLock) {
            css = {
                color: "gray",
                cursor: "auto"
            }
        } else {
            css = {
                color: "#000000"
            }
        }
        $("#department").css(css).attr("readonly", isLock);
        $("#marchandise").css(css).attr("readonly", isLock);
        if (isLock) {
            $("#department option").hide();
            $("#marchandise option").hide();
        } else {
            $("#department option").show();
            $("#marchandise option").show();
        }
        $("#goodsNumber").css(css).attr("readonly", isLock);
    }

    $("#clearDataBtn").click(function () {
        if (confirm("确认清空所有已经扫描的数据？")) {
            $("#outNum").html(0);
            $("#qrBoxList").empty();
            lockField(false);
        }
    });

    $("#goodsQr").keyup(function (e) {
        if (!$("#department").val()) {
            msgAlert.show("请选择要退货的部门！");
            $("#department").focus();
            $(this).val("");
        } else if (!$("#marchandise").val()) {
            msgAlert.show("请选择要退货的商品！");
            $("#marchandise").focus();
            $(this).val("");
        } else if (!$("#goodsNumber").val()) {
            msgAlert.show("请录入退货商品数量！");
            $("#goodsNumber").focus();
            $(this).val("");
        } else {
            if (e.keyCode == 13) {
                var _self = $(this);
                var departmentID = $("#department").val();
                var marchandiseID = $("#marchandise").val();
                var goodsNumber = parseInt($("#goodsNumber").val());
                if (!departmentID) {
                    msgAlert.show("请选择退货部门！");
                    return false;
                } else if (!marchandiseID) {
                    msgAlert.show("请选择退货商品！");
                    return false;
                } else if (goodsNumber < 1) {
                    msgAlert.show("请录入退货商品数量！");
                    return false;
                }

                //如何扫描完成，就不用再扫描了
                if (!countScanedQRGoods()) {
                    return false;
                }

                var qrCode = $.trim($(this).val());
                if (!qrCode) {
                    msgAlert.show("请扫描货物上的二维码!")
                    return false;
                }

                //清查一下是否有重复扫描的二维码，先只判断二维码，不检查箱码中的二维码。。bug...
                var isRepeat = false;
                $(".box[name=box]").each(function (i, item) {
                    var v = $(item).attr("value");
                    if (qrCode == v) {
                        isRepeat = true;
                        return false;
                    }
                });
                if (isRepeat) {
                    msgAlert.show("重复扫描的二维码！");
                    return false;
                }

                $.post("${ctx}/adoms/reback/valid", {
                    departmentID: departmentID,
                    marchandiseID: marchandiseID,
                    qrCode: qrCode
                }, function (rdata) {
                    if (rdata.error) {
                        var error = {
                            D: "此商品不属于该退货部门",
                            M: "此货物名称与退货商品名称不符"
                        }
                        msgAlert.show(error[rdata.error]);
                        return false;
                    }
                    var data = rdata.data;
                    var box = $("<div name='box' class='box' value='" + qrCode + "'><span class='close' name='boxRemove'>x</span></div>");
                    var len = 0;
                    if (data) {
                        //只支持单个扫描，不支持箱码扫描，给提示
                        if (data.goods.length > 1) {

                            msgAlert.show("请扫描单个二维码，不支持扫描箱码！");
                            return;
                        }

                        //如果是按箱扫描，发现扫描出来的货物数量与规格不一致，要提示操作者单个招描货物
//                        if (data.goods.length > 1 && data.goods.length != data.goods[0].mNumOfBox) {
//
//                            msgAlert.show("该箱货物已开箱，请单个扫描！");
//                            return;
//                        }
                        $.each(data.goods, function (k, item) {
                            item.state = item.state == '待售' ? '<span class="blue">退货</span>' : item.state;
                            var goods = item.mName + "<input type='hidden' name='goodsId' value='" + item.gId + "'/> - " + item.qwCode + " - " + item.state + "<br/>";
                            box.append(goods);
                            len++;
                        });
                    } else {
                        len = 0;
                    }

                    if (len > 0) {
                        box.prepend("二维码：" + qrCode + " - 数量：" + len + "<br/>");
                        lockField(true);
                    } else {
                        box.prepend("二维码：" + qrCode + " - <span style='color:red;'>无效</span><br/>");
                    }

                    $(".close", box).click(function () {
                        //加点显示效果
                        box.fadeOut();
                        box.remove();
                        countScanedQRGoods();
                    });
                    $("#qrBoxList").prepend(box);
                    countScanedQRGoods();
                    _self.val("");
                }, 'json');

                return false;
            }
        }
    });

    var countScanedQRGoods = function () {
        var len = $("input[name=goodsId]").length;
        $("#outNum").html(len);
        var outTotal = parseInt($("#outTotal").html());
        if (outTotal == len) {
            msgAlert.show("扫描完成，请检查确认无误后并提交退货信息！");
            $("#submitBtn").removeAttr("disabled");
            return false;
        } else if (outTotal < len) {
            msgAlert.show("扫描有误，请核查已扫描数量！")
            return false;
        }
        $("#submitBtn").attr("disabled", "disabled");
        return true;
    }

    //清空扫描框内的二维码
    $("#clearBtn").click(function () {
        $("#goodsQr").val("");
    });

    $("#submitBtn").click(function () {
        $("#inputForm").submit();
    });
});
</script>
<c:if test="${msg != null}">
    <script type="text/javascript">
        $(function () {
            msgAlert.show("${msg}");
        });
    </script>
</c:if>
</body>
</html>